<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>这是一个测试jsp</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="tu1" style="width: 1410px;height:650px;"></div>

<%--<div id="tu2" style="width: 600px;height:400px;"></div>--%>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('tu1'));
    // 指定图表的配置项和数据
        option = {
            title: {
                text: "不同湿度下租车情况",

            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true
                    }
                }
            },
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            legend: {
                data: ['casual', 'registered','count'],
                itemGap: 5
            },
            grid: {
                top: '12%',
                left: '1%',
                right: '10%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: []
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '数量',

                }
            ],
            dataZoom: [
                {
                    show: true,
                    start: 94,
                    end: 100
                },
                {
                    type: 'inside',
                    start: 94,
                    end: 100
                },
                {
                    show: true,
                    yAxisIndex: 0,
                    filterMode: 'empty',
                    width: 30,
                    height: '80%',
                    showDataShadow: false,
                    left: '93%'
                }
            ],
            series: [
                {
                    name: 'casual',
                    type: 'bar',
                    data: []
                },
                {
                    name: 'registered',
                    type: 'bar',
                    data: []
                }
            ]
        };






    var humidity=[];
    var casual=[];
    var registered=[];
    var count=[];

    $.ajax({
        url: 'hs',
        method: "get",
        dataType: "json",
        success: function (data) {
            alert(JSON.stringify(data));
            if (data){
                for (var i=0;i<data.length;i++){
                    humidity.push(data[i]['humidity']);
                }
                for (var i=0;i<data.length;i++){
                    casual.push(data[i]['casual']);
                }
                for (var i=0;i<data.length;i++){
                    registered.push(data[i]['registered']);
                }
                for (var i=0;i<data.length;i++){
                    count.push(data[i]['count']);
                }
                myChart.setOption({
                    xAxis: [
                        {
                            type: 'category',
                            data: humidity
                        }
                    ],
                    series: [
                        {
                            name: 'casual',
                            type: 'bar',
                            data: casual
                        },
                        {
                            name: 'registered',
                            type: 'bar',
                            data: registered
                        },
                        {
                            name: 'count',
                            type: 'bar',
                            data: count
                        }
                    ]
                })
            }

        },
        error: function (errMsg) {
            console.error(errMsg)
        }

    });
    myChart.setOption(option);

</script>
</body>
</html>
